<template>
  <div>
    <div class="book-cards" v-for="p in 3" :key="p">
      <div class="book-card">
        <div class="content-wrapper">
          <router-link to="/detail">
            <div style="width: 160px">
              <img style="width: 160px;height: 244.22px" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fchances-are-1-2000.jpg&q=85" alt="" class="book-card-img">
            </div>
          </router-link>
<!--          <img @click="open" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fchances-are-1-2000.jpg&q=85" alt="" class="book-card-img">-->
          <div class="card-content">
            <div class="book-name">Changes Are</div>
            <div class="book-by">by Richard Russo</div>
<!--            <div class="rate">
              <fieldset class="rating book-rate">
                <input type="checkbox" id="star-c1" name="rating" value="5">
                <label class="full" for="star-c1"></label>
                <input type="checkbox" id="star-c2" name="rating" value="4">
                <label class="full" for="star-c2"></label>
                <input type="checkbox" id="star-c3" name="rating" value="3">
                <label class="full" for="star-c3"></label>
                <input type="checkbox" id="star-c4" name="rating" value="2">
                <label class="full" for="star-c4"></label>
                <input type="checkbox" id="star-c5" name="rating" value="1">
                <label class="full" for="star-c5"></label>
              </fieldset>
              <span class="book-voters card-vote">1.987 voters</span>
            </div>-->
            <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
          </div>
        </div>
        <div class="likes">
          <div class="like-profile">
            <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
          </div>
<!--          <div class="like-profile">
            <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="like-img">
          </div>
          <div class="like-profile">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="like-img">
          </div>-->
<!--          <div class="like-name"><span>Samantha William</span> and<span> 2 other friends</span> like this</div>-->
          <i class="el-icon-view" style="font-size: 18px;float: right;padding: 10px;width: 150px;">
            <span>浏览量</span>
          </i>
          <i class="el-icon-star-off" style="font-size: 18px;float: right;padding: 10px">
            <span>like</span>
          </i>
        </div>
      </div>

      <div class="book-card">
        <div class="content-wrapper">
          <img src="https://images-na.ssl-images-amazon.com/images/I/7167iiDUeAL.jpg" alt="" class="book-card-img">
          <div class="card-content">
            <div class="book-name">Dominicana</div>
            <div class="book-by">by Angie Cruz</div>
            <div class="rate">
              <fieldset class="rating book-rate">
                <input type="checkbox" id="star-c6" name="rating" value="5">
                <label class="full" for="star-c6"></label>
                <input type="checkbox" id="star-c7" name="rating" value="4">
                <label class="full" for="star-c7"></label>
                <input type="checkbox" id="star-c8" name="rating" value="3">
                <label class="full" for="star-c8"></label>
                <input type="checkbox" id="star-c9" name="rating" value="2">
                <label class="full" for="star-c9"></label>
                <input type="checkbox" id="star-c10" name="rating" value="1">
                <label class="full" for="star-c10"></label>
              </fieldset>
              <span class="book-voters card-vote">1.987 voters</span>
            </div>
            <div class="book-sum card-sum">Readers of all ages and walks of life have drawn inspiration and empowerment from Elizabeth Gilbert’s books for years. </div>
          </div>
        </div>
        <div class="likes">
          <div class="like-profile">
            <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="like-img">
          </div>
          <div class="like-name"><span>Kimberly Jones</span> like this</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "HomeMainRightSide",
  data(){
    return{

    }
  },
  methods: {
    /*open(){

    }*/
  }
}
</script>

<style scoped>
.book-card{
  border-radius: 10px;
}

</style>
